<style>
  tbody .table-url-mapping-col {
    font-size: 1.2em;
  }
</style>

<template>
  <div class="function-table-con">
    <Table :columns="columns"
           :data="data"
           :loading="loading"
           @on-filter-change="handleFilterChange"/>

    <!-- 编辑 -->
    <Modal v-model="updateFunctionModal.show" width="400">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>编辑功能信息</span>
      </p>

      <div>
        <Form :model="updateFunctionModal.form" label-position="top">
          <FormItem label="功能编号">
            <Input v-model="updateFunctionModal.form.id" disabled/>
          </FormItem>
          <FormItem label="功能名称">
            <Input v-model="updateFunctionModal.form.name" placeholder="请输入功能名称"/>
          </FormItem>
          <FormItem label="功能标识">
            <Input v-model="updateFunctionModal.form.identifier" placeholder="请输入功能标识（英文）"/>
          </FormItem>
          <FormItem label="所属模块">
            <Select v-model="updateFunctionModal.form.moduleId">
              <Option v-for="module in moduleList"
                      :key="module.id"
                      :value="module.id">{{module.name}}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="备注">
            <Input v-model="updateFunctionModal.form.remark" type="textarea"/>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="updateFunctionModal.loading"
                @click="handleUpdateFunction(updateFunctionModal.form)"
                long>
          <span v-if="!updateFunctionModal.loading">更新功能</span>
          <span v-else>更新请求提交中</span>
        </Button>
      </div>
    </Modal>


    <!-- 删除 -->
    <Modal v-model="removeFunctionModal.show" width="360">

      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>确认删除功能</span>
      </p>

      <div style="text-align:center">
        <p>此操作将会导致相关功能<b style="padding:0 5px;color: red;">不可用</b>，请确认是否删除？</p>
      </div>

      <div slot="footer">
        <Button type="text" @click="removeFunctionModal.show=false">取消</Button>
        <Button type="error" :loading="removeFunctionModal.loading"
                @click="handleRemoveFunction(removeFunctionModal.func)">
          <span v-if="!removeFunctionModal.loading">确认删除</span>
          <span v-else>正在删除</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  let moduleFilters = []

  export default {
    name: "FunctionViewTable",
    props: ['data', 'loading'],
    data() {
      return {
        columns: [
          {
            title: '功能编号',
            key: 'id',
            width: 100,
            align: 'center'
          },
          {
            title: '功能名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '功能标识',
            key: 'identifier',
            align: 'center',
          },
          {
            title: '所属模块',
            key: 'moduleName',
            align: 'center',
            filters: moduleFilters,
            filterMultiple: false,
            filterMethod(value, row) {
              return value.id === row.module.id
            }
          },
          {
            title: '备注',
            key: 'remark',
            align: 'center',
          },
          {
            title: '添加时间',
            key: 'createdDate',
            align: 'center'
          },
          {
            title: '操作',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.updateFunction(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.removeFunction(params.row)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],

        // 更新功能模态框
        updateFunctionModal: {
          show: false,
          form: {
            id: 0,
            name: '',
            identifier: '',
            moduleId: null
          },
          loading: false
        },

        // 功能删除模态框
        removeFunctionModal: {
          show: false,
          func: {},
          loading: false
        }
      }
    },
    computed: {
      ...mapState('system', {
        moduleList: state => state.module.moduleList
      })
    },
    methods: {
      ...mapActions('system/module', [
        'listModule'
      ]),

      // 更新功能
      updateFunction(func) {
        let updateFunctionModal = this.updateFunctionModal;
        updateFunctionModal.show = true;
        updateFunctionModal.form = func
        updateFunctionModal.form.moduleId = func.module.id
      },
      handleUpdateFunction(functionForm) {
        let updateFunctionModal = this.updateFunctionModal;
        updateFunctionModal.loading = true
        this.$emit('on-update-function', functionForm, (status) => {
          if (status) {
            updateFunctionModal.show = false
          }
          updateFunctionModal.loading = false
        })
      },

      // 删除功能
      removeFunction(func) {
        let removeFunctionModal = this.removeFunctionModal;
        removeFunctionModal.show = true
        removeFunctionModal.func = func
      },
      handleRemoveFunction(func) {
        let removeFunctionModal = this.removeFunctionModal;
        removeFunctionModal.loading = true
        this.$emit('on-remvoe-function', func, (status) => {
          if (status) {
            removeFunctionModal.show = false
            removeFunctionModal.func = {}
          }
          removeFunctionModal.loading = false
        });
      },

      handleFilterChange(obj) {
        console.log(obj);
      }
    },
    created() {
      this.listModule().then(data => {
        if (moduleFilters.length !== 0) {
          moduleFilters = []
        }
        data.forEach(module => {
          moduleFilters.push({
            label: module.name,
            value: {
              id: module.id,
              name: module.name
            }
          })
        })
      })
    }
  }
</script>
